Estaba tratando de integrar la clave API de la tira, pero no puedo encontrar la solución en la nueva versión de react-router-dom
aqui esta el error completo
El error anterior ocurrió en el componente:
at Routes (http://localhost:3000/static/js/bundle.js:81119:5) at Router (http://localhost:3000/static/js/bundle.js:81052:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:79861:5) at App (http://localhost:3000/main.79cc3231add2da1b35a8.hot-update.js:89:63) at Provider (http://localhost:3000/static/js/bundle.js:74963:5)Considere agregar un límite de error a su árbol para personalizar el comportamiento del manejo de errores. Visite https://reactjs.org/link/error-boundaries para obtener más información sobre los límites de error.
aquí está mi código de ruta protegida de Appjs:
import { Elements } from "@stripe/react-stripe-js"; import { loadStripe } from "@stripe/stripe-js"; useEffect(() => { store.dispatch(loadUser()); getStripeApiKey(); }, []); useEffect(() => { const stripePromise= loadStripe(stripeApiKey); }, [stripeApiKey]); <Route element={<ProtectedRoute />}> <Route path="/account" element={<Profile />} /> <Route path="/me/update" element={<ProfileEdit />} /> <Route path="/password/update" element={<UpdatePassword />} /> <Route path="/login/shipping" element={<Shipping />} /> <Route path="/order/confirm" element={<ConfirmOrder />} /> {stripeApiKey && ( <Elements stripe={stripePromise}> <Route path="/order/payment" element={<Payment />} /> </Elements> )} </Route>Mi código de ruta protegido
const ProtectedRoute = () => { const { loading, isAuthenticated, user } = useSelector((state) => state.user); const location = useLocation(); if (isAuthenticated == false) { return <Navigate to="/account" state={{ from: location }} />; } return <Outlet />; }; export default ProtectedRoute; Este problema es que está representando algo que no es una Route o React.Fragment dentro del componente de Routes .
{stripeApiKey && ( <Elements stripe={stripePromise}> <Route path="/order/payment" element={<Payment />} /> </Elements> )} El componente Elements no es ninguno de los dos y falla la verificación de invariantes.
Refactorice esto en un componente de ruta de diseño similar al componente ProtectedRoute .
Ejemplo:
import { Outlet, Navigate } from 'react-router-dom'; const StripeLayout = ({ stripeApiKey }) => { return stripeApiKey ? <Outlet /> : <Navigate to="/" replace /> };...
<Route element={<ProtectedRoute />}> <Route path="/account" element={<Profile />} /> <Route path="/me/update" element={<ProfileEdit />} /> <Route path="/password/update" element={<UpdatePassword />} /> <Route path="/login/shipping" element={<Shipping />} /> <Route path="/order/confirm" element={<ConfirmOrder />} /> <Route element={<StripeLayout {...{ stripeApiKey }} />}> <Route path="/order/payment" element={( <Elements stripe={stripePromise}> <Payment /> </Elements> )} /> </Route> </Route>Está recibiendo ese error debido a esta línea de código
{stripeApiKey && ( <Elements stripe={stripePromise}> <Route path="/order/payment" element={<Payment />} /> </Elements> )}Solo Route o React.Fragment pueden ser elementos secundarios del componente Routes. Pero en su caso, si stripeApiKey resulta ser cierto, está representando el componente Elements que contradice las nuevas reglas del enrutador de reacción v6
Como pediste en los comentarios, quieres envolver tu método de pago
<Route path="/order/payment" element={<Elements stripe={stripePromise}><Payment /></Elements} />